<template>
  <div class="application">
    <div class="content">
      <div class="logo">
        <div class="img-box">
          <img src="@/assets/images/icon_logo .png" alt />
        </div>
        <p>欢迎加入DDS·C设计师俱乐部</p>
      </div>
      <div class="input-box">
        <van-field required label="姓名" placeholder="请编辑" v-model="form.name" />
        <van-field required type="tel" label="手机号" placeholder="请输入手机号" v-model="form.phone" />
        <van-field required type="digit" label="验证码" placeholder="请输入验证码" v-model="form.captcha">
          <template slot="extra">
            <span @click="getCodeClick" v-if="showGetCode">{{ codeTxt }}</span>
            <span v-else style="position:relative; left: -0.4rem">{{time}}s</span>
          </template>
        </van-field>
        <van-field required label="公司名称" placeholder="请编辑 例如:自由职业者" v-model="form.companyName" />
      </div>
      <div class="protocol">
        <span>提交申请即同意</span>
        <router-link to="/designer/poster/application/protocol" tag="a">《DDS·C设计师入驻协议》</router-link>
      </div>
    </div>
    <div class="btn">
      <div class="btn-box">
        <button class="price-tip" @click="priceClick">258 元/年</button>
        <div class="join">
          <my-button :name="joinTitle" @btnClick="handleBtnClick" />
        </div>
      </div>
    </div>
    <!-- 入住 -->
    <Tip ref="tip" class="tip">
      <div class="txt">
        <p>感谢青睐，俱乐部已收到您的申请</p>
        <p>我们将在3-5个工作日内完成审核</p>
      </div>
      <my-button name="确定" class="my-button" @click.native="joinSuccess" />
    </Tip>

    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import Tip from '@/components/tip/tip'
import { designerJoin } from '@/api/home'
import { getCaptcha, getUserInfo } from '@/api/my'
import { getToken } from '@/util/auth'
import wx from 'weixin-js-sdk'

const ERR_OK = 200
const constantTime = 60
export default {
  components: {
    Tip
  },
  data () {
    return {
      joinTitle: '加入DDS·C',
      showGetCode: true,
      time: constantTime,
      timer: null,
      codeTxt: '获取验证码',
      form: {
        phone: '',
        name: '',
        captcha: '',
        companyName: ''
      }
    }
  },
  watch: {
    time (newVal) {
      if (newVal <= 0) {
        this.timer && clearInterval(this.timer)
        this.showGetCode = true
        this.codeTxt = '重新获取'
        this.time = constantTime
      }
    }
  },
  destroyed () {
    this.timer && clearInterval(this.timer)
  },
  created () {
    if (this.$route.query.renew) {
      this.joinTitle = '立即续费'
      const apply = JSON.parse(this.$route.query.apply)
      this.form.companyName = apply.company_name
      this.form.phone = apply.phone
      this.form.name = apply.name
    }
    getUserInfo().then(res => {
      if (res.code === ERR_OK) {
        localStorage.setItem('USER', JSON.stringify(res.data.user))
      }
    })
  },
  beforeRouteEnter (to, from, next) {
    // ...
    next(vm => {
      if (window.location.hash.includes('success')) {
        vm.$refs.tip.show()
      }
    })
  },

  methods: {
    joinSuccess () {
      this.$router.replace('/designer/poster')
      this.$emit('success')
    },
    getCodeClick () {
      if (this.showGetCode) {
        if (!this.form.phone) {
          this.$toast('手机号码不能为空')
          return
        }
        this._getCaptcha(this.form.phone).then(() => {
          this.showGetCode = false
          this.timer = setInterval(() => {
            this.time -= 1
          }, 1000)
        })
      }
    },
    priceClick () {},
    handleBtnClick () {
      // this.$refs.tip.show()
      // this.$refs.check.show()
      if (!this.form.name) {
        this.$toast('请输入姓名~')
        return
      }
      if (!this.form.phone) {
        this.$toast('请输入手机号码~')
        return
      }
      if (!this.form.captcha) {
        this.$toast('请输入验证码~')
        return
      }
      if (!this.form.companyName) {
        this.$toast('请输入公司名称~')
        return
      }
      this._designerJoin(this.form).then(res => {
        if (res.code === ERR_OK) {
          const token = getToken()
          wx.miniProgram.getEnv(ress => {
            if (ress.miniprogram) {
              wx.miniProgram.navigateTo({
                url: `/pages/pay/pay?order_no=${res.data.number}&token=${token}`
              })
            }
          })
        }
      })
    },
    _designerJoin ({ phone, name, captcha, companyName }) {
      return designerJoin({ phone, name, captcha, companyName })
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          return Promise.reject(err)
        })
    },
    _getCaptcha (phone) {
      return getCaptcha(phone)
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@include slideEnter();
.tip {
  .txt {
    margin-top: 0.9rem;
    p {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 4, 0, 1);
      line-height: 0.46rem;
      text-align: center;
    }
  }
  .my-button {
    margin-top: 0.62rem;
  }
}

.application {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  touch-action: none;
  z-index: 99;
  .content {
    width: 100%;
    // height: 100%;
    padding: 1.16rem 1.12rem 0.8rem 1.12rem;
    box-sizing: border-box;
    .logo {
      .img-box {
        width: 2.26rem;
        height: 0.71rem;
        font-size: 0;
        img {
          width: 100%;
          vertical-align: top;
        }
      }
      p {
        font-size: 0.34rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(153, 152, 153, 1);
        line-height: 0.35rem;
        margin-top: 0.32rem;
      }
    }
    .input-box {
      margin-top: 1.5rem;
      .van-cell {
        padding-left: 0;
        padding-right: 0;
        padding: 15px 0;
        &::after {
          left: 0;
        }
        &::before {
          left: -10px;
        }
      }
    }

    .protocol {
      // @include hCenter();
      // bottom: 1.5rem;
      margin: 0 auto;
      text-align: center;
      margin-top: 2rem;
      white-space: nowrap;

      span {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(5, 2, 1, 1);
      }
      a {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999899;
        text-decoration: underline;
      }
    }
  }
  .btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    .btn-box {
      display: flex;
      align-content: center;
    }
    .price-tip {
      width: 50%;
      height: 0.8rem;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(5, 2, 1, 1);
      text-align: center;
      border: none;
      outline: none;
    }
    .join {
      font-size: 0;
      width: 50%;
    }
  }
}
</style>
